<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-3.6.0.min.js"></script>
    <script src="indexedBb.js"></script>
    <script src="popup.js"></script>
    <script src="dialog.js"></script>
    <script src="getBase64.js"></script>
	<style>
        body {
            width: 300px;
            height: 485px;
            overflow: scroll;
            border-radius: 1rem 1rem;
            background-image: url('images/background2.jpg');
            background-size: 100%;
            color: rgb(5, 55, 71);
        }
        .avabutton-css {
            background: #3498db;
            background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
            background-image: -moz-linear-gradient(top, #3498db, #2980b9);
            background-image: -ms-linear-gradient(top, #3498db, #2980b9);
            background-image: -o-linear-gradient(top, #3498db, #2980b9);
            background-image: linear-gradient(to bottom, #3498db, #2980b9);
            font-family: Consolas;
        }
        .button1 {
            background-color: #9AC8E2;
            text-align: center;
            font-size: 15px;
            font-weight: bold;
            color: white
        }/* 向晚 */
        .button2 {
            background-color: #DB7D74;
            text-align: center;
            font-size: 15px;
            font-weight: bold;
            color: white;
        } /* 贝拉 */
        .button3 {
            background-color: #B8A6D9;
            text-align: center;
            font-size: 15px;
            font-weight: bold;
            color: white
        } /* 珈乐 */
        .button4 {
            background-color: #E799B0;
            text-align: center;
            font-size: 15px;
            font-weight: bold;
            color: white
        } /* 嘉然 */
        .button5 {
            background-color: #576690;
            text-align: center;
            font-size: 15px;
            font-weight: bold;
            color: white
        } /* 乃琳 */
        #img-show-list {
            display: flex;
            flex-wrap: wrap;
        }
		#img-show-list img::after{
			content: 'x';
			color: red;
		}
	</style>
</head>
<body>
<div style="font-size: 20px;text-align: center;font-weight: bold;">背景图片上传</div>
<div id="img-show-list"></div>
<input accept="image/*" name="img" id="ImgFile" type="file">

<div style=" text-align: center; font-size: 20px; line-height: 50px; font-weight: bold;">晚安枝江</div>
<div class=".avabutton-css button1" id="changepetA" >Ava</div>
<div class=".avabutton-css button2" id="changepetB" >Bella</div>
<div class=".avabutton-css button3" id="changepetC" >Carol</div>
<div class=".avabutton-css button4" id="changepetD" >Diana</div>
<div class=".avabutton-css button5" id="changepetE" >Eileen</div>

<div>
	<div style="text-align: center; font-size: 20px; line-height: 30px; font-weight: bold;">说明<br /></div>
	<p style="font-size: 15px; background: rgba(255,255,255,0.7);">
		第一次使用会使一些URL元素和数据库加载不出来<br />
		请耐心等待，不要重新安装<br />
		默认是隐藏状态，使用alt + 0显示，下面是说明文档<br />
	</p>
</div>

<a style="text-align:center; font-size: 20px;"href="help.html" target="_blank"> Help</a>

<div id="dialog" style="position:absolute;
background-color: white; top: 10vh; left: 25vw; z-index: 1000; display: none; flex-direction: column;">
<div style="height:100%;" >
<span id="dialogCloseBtn" title="关闭" style="color:red;right:0;width: 1rem;height: 1rem;
background-color: gainsboro;line-height: 1rem;
text-align: center;border-radius: 50%;margin: 0.3rem;
cursor: pointer;position: absolute;">
x
</span >
<img id="showImg" style="width: 100%;height: 100%;" src="https://images8.alphacoders.com/992/992329.jpg" >
</div >
<div style="background-color: #B8A6D9;display: flex;height:2rem;" >
<div id="dialogDeleteBtn" title="删除图片" style="flex:1;text-align: center;cursor: pointer;line-height: 2rem;border-right: 1px solid;" > 删除</div >
<div id="dialogSetBtn" title="设为背景" style="flex:1;text-align: center;cursor: pointer;line-height: 2rem;" > 设为背景</div >
</div >
</div >
<div id="mask" style="position: fixed; height: 100vh; width: 100vw; background-color: grey;
top: 0px;left:0; opacity: 0.3; z-index: 999; display: none;"></div>
</body >
</html >
